// 混合器
// 定义混合器（无参）
@mixin flex_center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

// transition: all 2s 1s linear
// 混合器（带参）
@mixin my_transition($properties,$duration,$delay,$easing) {
    -webkit-transition:$properties $duration $delay $easing;
    -moz-transition: $properties $duration $delay $easing;
    -ms-transition:$properties $duration $delay $easing;
    -o-transition: $properties $duration $delay $easing;
    transition: $properties $duration $delay $easing;
}


// // 混合器（带默认参数）
@mixin my_transition2($properties:all,$duration:1s,$delay:0s,$easing:linear) {
    -webkit-transition:$properties $duration $delay $easing;
    -moz-transition: $properties $duration $delay $easing;
    -ms-transition:$properties $duration $delay $easing;
    -o-transition: $properties $duration $delay $easing;
    transition: $properties $duration $delay $easing;
}


// 引用混合器
div {
    width: 100px;
    @include flex_center();

    // transition: all 1s 0s linear;
    @include my_transition(all, 1s, 0s, linear);
}

p{
    // transition: left 2s 0s linear;
    // @include flex_center()

    @include my_transition2(left, 2s);
}